<template>
  <ul class="m-animations">
    <li v-for="(animate, key) in animations" :key="key" @click="handleChangeType(key)" :class="{ active:isActive == key}">
        {{ animate.name }}
        <!-- <i v-if="ani.type == key" class="el-icon-circle-check el-icon--right" ></i> -->
    </li>
  </ul>
</template>

<script>
import { ANI_NAME } from '@/const/animation-match.js'

export default {
  name: 'UIAnimate',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data () {
    const defaultAni = {
      type: 1,
      duration: 1,
      delay: 0.4
    }
    return {
      animations: ANI_NAME,
      ani: Object.assign(defaultAni, this.value),
			isActive : 1
    }
  },
	watch:{
		value:{
			handler(new_val,old_val){
				this.isActive=new_val.type
			},
				deep: true,
		}
	},
  methods: {
    handleChangeType (type) {
      this.ani.type = type
      this.handleChange()
			this.isActive = type
    },
    handleChange () {
      const ani = this.ani
      this.$emit('change', {
        key: 'anim',
        value: {
          type: ani.type,
          duration: ani.duration,
          delay: ani.delay
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .m-animations {
		overflow: hidden;
		padding-left:14px;
    > li {
      float: left;
      width: 108px;
			height:36px;
			line-height:36px;
			border:1px solid #dbdee6;
			border-radius:2px;
      margin: 15px 14px 0 0;
      text-align: center;
			cursor:pointer;
			color:#909399;

    }
		.active{
			background:#849bfe;
			color:#fff;
			border:1px solid #849bfe;
		}
  }
</style>
